<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>尤迈桃李会</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/user.css">
    <script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/96d8f960b261e49515450f8953b044bc5/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script>
</head>
<body>
    <div class="user-auth bgwhite" id="main">
        <div class="top-space"></div>
        <div class="plr15">
            <p class="pub-user-tit">医务工作者认证</p>
        </div>
        <form action="#" id="saveDoctor" autocomplete="off">
            <div class="pub-box space-border plr15">
                <span class="pub-desc"><i class="i-required">*</i>姓名</span>
                <input class="pub-text" type="text" name="userName">
            </div>
            <div class="pub-box space-border plr15">
                <span class="pub-desc"><i class="i-required">*</i>手机号</span>
                <input class="pub-text" type="text" id="loginMobileView" value="">
                <input class="pub-text" type="hidden" name="loginMobile" value="">
            </div>
            <div class="pub-box space-border plr15" id="selectHospital">
                <span class="pub-desc"><i class="i-required">*</i>医院</span>
                <div>
                    <span id="hospitalView"></span>
                    <span class="right-arrow-btn"></span>
                </div>
                <input type="hidden" name="hospitalName" value="">
                <input type="hidden" name="id" value="">
                <input type="hidden" name="provinceCode" value="">
                <input type="hidden" name="cityCode" value="">
                <input type="hidden" name="areaCode" value="">
                <input type="hidden" name="countryCode" value="">
            </div>
            <div class="pub-box space-border plr15" id="selectDepart">
                <span class="pub-desc"><i class="i-required">*</i>科室</span>
                <div>
                    <span id="departView"></span>
                    <span class="right-arrow-btn"></span>
                </div>
                <input type="hidden" name="depart" value="">
                <input type="hidden" name="departCode" value="">
                <input type="hidden" name="departmentCode" value="">
            </div>
            <div class="pub-box space-border plr15" id="selectCompetent">
                <span class="pub-desc"><i class="i-required"></i>职称</span>
                <div>
                    <span id="compotentView"></span>
                    <span class="right-arrow-btn"></span>
                </div>
                <input type="hidden" name="competent" value="">
            </div>
            <div class="pub-box space-border plr15" id="selectDuty">
                <span class="pub-desc"><i class="i-required"></i>职务</span>
                <div>
                    <span id="dutyView"></span>
                    <span class="right-arrow-btn"></span>
                </div>
                <input type="hidden" name="duty" value="">
            </div>
            <div class="pub-box space-border plr15" id="selectDoctor">
                <span class="pub-desc"><i class="i-required"></i>医生职业资格证</span>
                <div>
                    <span id="doctorView"></span>
                    <span class="right-arrow-btn"></span>
                </div>
                <input type="hidden" name="doctorNumber" value="">
                <input type="hidden" name="cardId" value="">
                <input type="hidden" name="doctorId" value="">
                <input type="hidden" name="practitionId" value="">
            </div>
            <div class="submit-box">
                <input class="pub-submit-btn" type="submit" value="提交申请">
                <div class="btn-wrapper">
                    <a class="choose-identity" href="javascript:history.back(-1)">选择其他身份</a>
                </div>
            </div>
        </form>
    </div>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/public.js"></script>
    <script>
        // 获取手机号
        var phone = localStorage.getItem('mobile');
        $('[name=loginMobile]').val(phone);
        $('#loginMobileView').val(phoneDesensitization(phone));

        // 监听手机号输入
        $('#loginMobileView').on('input', function(){
            $('[name=loginMobile]').val($(this).val());
        })

        // 选择医院
        $('#selectHospital').click(function(){
            // window.location.href = 'user-auth-area.html';
            $('#main').hide();
            $('#areaModule').show();
        })

        // 选择科室
        $('#selectDepart').click(function(){
            $('#main').hide();
            $('#departMoudle').show();
        })

        // 选择职称
        $('#selectCompetent').click(function(){
            $('#main').hide();
            $('#compotentModule').show();
        })

        // 选择职务
        $('#selectDuty').click(function(){
            $('#main').hide();
            $('#dutyModule').show();
        })

        // 选择医生资格证
        $('#selectDoctor').click(function(){
            $('#main').hide();
            $('#doctorModule').show();
        })

        // 提交申请
        // 数据验证
        function doctorDataValidation(doctor){
            var doctorMsg = {
                userName: '姓名不能为空',
                id: '请选择医院',
                departCode: '请选择科室',
                // departmentCode: '请选择科室',
                // competent: '请选择职称',
                // duty: '请选择职务',
                // doctorNumber: '请填写医生资格证',
                loginMobile: '请填写用户手机号'
            };
            for(var k in doctorMsg){
                if(validEmpty(doctor[k], doctorMsg[k])) return true;
            }

            if(validPhone(doctor.loginMobile, '手机号格式不正确')) return true;
            return false;
        }
        // 提交
        var subState = false; // 防重
        $('#saveDoctor').submit(function(){
            if(subState) return false;
            var doctorData = $(this).serializeObject();
            if(doctorDataValidation(doctorData)) return false;
            var url = getQueryString('type') === 'reAuth' ? '/userMessage/updateDoctor' : '/userMessage/saveDoctor';
            subState = true
            // 医生认证信息保存
            
            http(url, {
                hasToken: true,
                data: doctorData,
                success: function(res){
                    if(res.code === '01'){
                        // toast('认证成功');
                        toast('资料提交成功，请等待审核');
                        backIndex(1000);
                    }
                },
                complete: function(){
                    subState = false;
                }
            })
            return false;
        })
    </script>

    <!-- 选择科室 -->
    <div class="user-choose bgwhite" id="departMoudle" style="display: none;">
        <div class="search-box">
            <input class="search" type="text" placeholder="输入科室名称" id="searchDepart">
        </div>
        <ul class="main">
            <li class="area-item department" id="leve1Depart">
            </li>
            <li class="area-item city" id="leve2Depart">
            </li>
        </ul>
        <div class="footer submit-box">
            <input class="pub-submit-btn" id="departConfirm" type="button" value="确定">
        </div>
    </div>
    <script>
        
        var departData, level1Depart, level2Depart;

        // 获取科室列表数据
        getDepartData();
        function getDepartData(){
            http('/depart/queryByName', {
                noEncry: true,
                data: {
                    departmentName: $.trim($('#searchDepart').val())
                },
                success: function(res){
                    if(res.code === '01'){
                        console.log(res)
                        departData = res.data;
                        // 更新一级科室
                        updateDepart();
                    }
                }
            })
        }

        // 获取科室html
        function getDepartListHtml(departData){
            var html = '';
            departData.forEach((depart, index) => {
                html +='<p class="' + (index == 0 ? 'active' : '') + '" data-departCode="' + depart.departmentCode + '">' + depart.departmentName + '</p>'
            });
            return html
        }
        
        // 更新2级科室
        function updateLevel2Depart(index){
            var level2Html = getDepartListHtml(departData[index] ? departData[index].departList : []);
            $('#leve2Depart').html(level2Html);
        }

        // 更新科室
        function updateDepart(){
            $('#leve1Depart').html(getDepartListHtml(departData) || []);

            // 更新二级科室
            updateLevel2Depart(0);
        }

        // 科室选择
        $('#leve1Depart').click(function(e){
            changeSelected($(e.target));
            // 更新二级科室
            updateLevel2Depart($(e.target).index());
        });
        $('#leve2Depart').click(function(e){
            changeSelected($(e.target));
        });

        // 确定点击事件
        $('#departConfirm').click(function(e){
            var $depart2Ele = $('#leve2Depart').find('p.active');
            var depart=$depart2Ele.text();
            var departCode = $('#leve1Depart').find('p.active').attr('data-departCode');
            var departmentCode = $depart2Ele.attr('data-departCode');
            $('[name=depart]').val(depart);
            $('[name=departCode]').val(departCode);
            $('[name=departmentCode]').val(departmentCode);

            $('#departView').text(depart);
            $('#main').show();
            $('#departMoudle').hide();
        })

        // 搜索科室
        $('#searchDepart').keypress(function(e){
            if(e.keyCode != 13) return;
            getDepartData();
        })

    </script>

    <!-- 选择省市乡镇 -->
    <div class="user-choose bgwhite" id="areaModule" style="display: none;">
        <div class="search-box">
            <input class="search" type="text" placeholder="输入医院名称" id="toHospital">
        </div>
        <ul class="main-titles">
            <li class="province">省</li>
            <li class="city">市</li>
            <li class="county">旗/县</li>
            <li class="town">乡/镇</li>
        </ul>
        <ul class="main">
            <li class="area-item province" id="provinceList"></li>
            <li class="area-item city" id="cityList"></li>
            <li class="area-item county" id="areaList"></li>
            <li class="area-item town" id="countryList"></li>
        </ul>
        <div class="footer submit-box">
            <input class="pub-submit-btn" id="areaConfirm" type="button" value="确定">
        </div>
    </div>
    <script>
        var proviceData, cityData, areaData;
        // 获取省市区数据
        http('/hospital/getAllList', {
            noEncry: true,
            success: function(res){
                if(res.code === '01'){
                    // 更新省
                    proviceData = res.data;
                    $('#provinceList').html(getListHtml(proviceData, 'areaCode', 'areaName'));

                    // 更新市、区、乡镇
                    updateCity(0);
                    updateArea(0);
                    updateCountry(areaData[0].areaCode)
                }
            }
        })

        // 更新市
        function updateCity(index){
            cityData = proviceData[index].areaList;
            cityData.unshift({
                areaCode: '',
                areaName: '全部',
                areaList: []
            })
            $('#cityList').html(getListHtml(cityData, 'areaCode', 'areaName'));
        }

        // 更新区
        function updateArea(index){
            areaData = cityData[index].areaList;
            areaData.unshift({
                areaCode: '',
                areaName: '全部',
                areaList: []
            })
            $('#areaList').html(getListHtml(areaData, 'areaCode', 'areaName'));
        }

        // 更新乡镇
        function updateCountry(areaCode){
            http('/hospital/queryCountry', {
                data: {
                    areaCode: areaCode
                },
                success: function(res){
                    if(res.code === '01'){
                        var countryData = res.data;
                        countryData.unshift({
                            areaCode: '',
                            areaName: '全部',
                            areaList: []
                        })
                        $('#countryList').html(getListHtml(countryData, 'areaCode', 'areaName'));
                    }
                }
            })
        }
        
        // 选择省
        $('#provinceList').click(function(e){
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新市、区、乡镇
            updateCity(index);
            updateArea(0);
            updateCountry(areaData[0].areaCode);
        })

        // 选择市
        $('#cityList').click(function(e){
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新市、区、乡镇
            updateArea(index);
            updateCountry(areaData[0].areaCode);
        })

        // 选择区
        $('#areaList').click(function(e){
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
            // 更新市、区、乡镇
            updateCountry(areaData[index].areaCode);
        })

        // 选择乡镇
        $('#countryList').click(function(e){
            var $selectEle = $(e.target);
            var index = $selectEle.index();
            changeSelected($selectEle);
        })

        // 省市乡镇确认
        $('#areaConfirm').click(function(){
            var departCode = $('#provinceList').find('p.active').attr('data-code');
            var departmentCode = $('#leve2Depart').find('p.active').attr('data-departCode');
            $('[name=provinceCode]').val($('#provinceList').find('p.active').attr('data-code'));
            $('[name=cityCode]').val($('#cityList').find('p.active').attr('data-code'));
            $('[name=areaCode]').val($('#areaList').find('p.active').attr('data-code'));
            $('[name=countryCode]').val($('#countryList').find('p.active').attr('data-code'));

            $('#areaModule').hide();
            $('#hospitalModule').show();
            getHospitalList();
        })
        // 搜索医院
        $('#toHospital').keypress(function(e){
            console.log('toHospital')
            if(e.keyCode != 13) return;
            // 清空省市乡镇数据、显示选择医院模块
            $('#hospitalSearch').val($.trim($(this).val()));
            $('[name=provinceCode]').val('');
            $('[name=cityCode]').val('');
            $('[name=areaCode]').val('');
            $('[name=countryCode]').val('');

            $('#areaModule').hide();
            $('#hospitalModule').show();
            getHospitalList();
        })
        
    </script>

    <!-- 选择医院 -->
    <div class="user-choose bgwhite" id="hospitalModule" style="display: none;">
        <div class="search-box">
            <input class="search" type="text" placeholder="输入医院名称" id="hospitalSearch">
        </div>
        <ul class="main">
            <li class="area-item plr15" id="hospitalList">
            </li>
        </ul>
        <div class="footer"></div>
    </div>
    <script>
        // 获取医院列表数据
        function getHospitalList(){
            http('/hospital/queryHospital', {
                noEncry: true,
                data: {
                    hospitalName: $('#hospitalSearch').val(),
                    provinceCode: $('[name=provinceCode]').val(),
                    cityCode: $('[name=cityCode]').val(),
                    areaCode: $('[name=areaCode]').val(),
                    countryCode: $('[name=countryCode]').val()
                },
                success: function(res){
                    if(res.code === '01'){
                        var hospitalData = res.data;
                        var html = '';
                        hospitalData.forEach(hospital => {
                            html += '<div class="pub-box" data-code="' + hospital.id + '">' + 
                                '<span class="pub-desc">' + hospital.hospitalAddress + '</span>' + 
                                '<span class="right-arrow-btn"></span>' + 
                            '</div>';
                        });
                        var txt = hospitalData.length === 0 ? '暂无数据，点击返回' : '没有更多数据了';
                        html += getNoDataHtml(txt);
                        $('#hospitalList').html(html);
                    }
                }
            })
        }

        // 选择医院
        $('#hospitalList').click(function(e){
            var $target = $(e.target);
            if(e.target == this) return;
            if(!$target.hasClass('pub-box')){
                $target = $target.parent('.pub-box');
            }
            var hospitalName = $target.find('.pub-desc').text();
            $('[name=id]').val($target.attr('data-code'));
            $('[name=hospitalName]').val(hospitalName);
            $('#hospitalView').html(hospitalName)

            $('#main').show();
            $('#hospitalModule').hide();
            $('#toHospital').val('');
            $('#hospitalSearch').val('');
        })

        // 查询医院
        $('#hospitalSearch').keypress(function(e){
            if(e.keyCode != 13) return;
            getHospitalList();
        })
        $('#hospitalSearch').blur(function(){
            getHospitalList();
        })
    </script>

    <!-- 选择职称 -->
    <div class="user-choose bgwhite" id="compotentModule" style="display: none;">
        <ul class="main">
            <li class="area-item plr15" id="compotentList">
            </li>
        </ul>
        <div class="footer"></div>
    </div>
    <script>
        // 获取职称列表数据
        getCompotentList();
        function getCompotentList(){
            http('/competent/getAllList', {
                noEncry: true,
                success: function(res){
                    if(res.code === '01'){
                        var html = '';
                        res.data.forEach(ele => {
                            html += '<div class="pub-box" data-code="' + ele.id + '">' + 
                                '<span class="pub-desc">' + ele.competent + '</span>' + 
                                '<span class="right-arrow-btn"></span>' + 
                            '</div>';
                        });
                        var txt = res.data.length === 0 ? '暂无数据，点击返回' : '没有更多数据了';
                        html += getNoDataHtml(txt);
                        $('#compotentList').html(html);
                    }
                }
            })
        }

        // 选择职称
        $('#compotentList').click(function(e){
            var $target = $(e.target);
            if(e.target == this) return;
            if(!$target.hasClass('pub-box')){
                $target = $target.parent('.pub-box');
            }
            $('[name=competent]').val($target.attr('data-code'));
            $('#compotentView').html($target.find('.pub-desc').text())

            $('#main').show();
            $('#compotentModule').hide();
        })

    </script>

    <!-- 选择职务 -->
    <div class="user-choose bgwhite" id="dutyModule" style="display: none;">
        <ul class="main">
            <li class="area-item plr15" id="dutyList">
            </li>
        </ul>
        <div class="footer"></div>
    </div>
    <script>
        // 获取职务列表数据
        getDutyList();
        function getDutyList(){
            http('/level/getAllList', {
                noEncry: true,
                success: function(res){
                    if(res.code === '01'){
                        var html = '';
                        res.data.forEach(ele => {
                            html += '<div class="pub-box" data-code="' + ele.levelId + '">' + 
                                '<span class="pub-desc">' + ele.name + '</span>' + 
                                '<span class="right-arrow-btn"></span>' + 
                            '</div>';
                        });
                        var txt = res.data.length === 0 ? '暂无数据，点击返回' : '没有更多数据了';
                        html += getNoDataHtml(txt);
                        $('#dutyList').html(html);
                    }
                }
            })
        }

        // 选择职务
        $('#dutyList').click(function(e){
            var $target = $(e.target);
            if(e.target == this) return;
            if(!$target.hasClass('pub-box')){
                $target = $target.parent('.pub-box');
            }
            var dutyName = $target.find('.pub-desc').text();
            $('[name=duty]').val($target.attr('data-code'));
            $('#dutyView').html(dutyName)

            $('#main').show();
            $('#dutyModule').hide();
        })

    </script>

    <!-- 医生职业资格证 -->
    <div class="user-auth-certificate bgwhite" id="doctorModule" style="display: none;">
        <div class="top-space"></div>
        <div class="plr15">
            <p class="pub-user-tit">医务工作者认证</p>
        </div>
        <form method="post" onsubmit="submitCard();return false;" action="#">
            <div class="pub-box doctor-num">
                <span class="pub-desc"><i class="i-required">*</i>医师资格证号码：</span>
                <input class="pub-text" type="text" name="doctorNumberInput">
            </div>
            <div class="upload-box">
                <div class="upload-inner-box">
                    <i class="i-required">*</i>
                    <div class="input-box">
                        <image class="upload-img hide" src=""></image>
                        <span class="upload-step">第一步</span>
                        <div class="upload-center">
                            <i class="upload-icon"></i>
                            <p class="upload-txt">上传身份证人像面</p>
                        </div>
                        <input class="unload-input" data-type="cardId" type="file" name="cardFile" value="" accept="image/*">
                    </div>
                </div>
                <div class="upload-inner-box">
                    <i class="i-required">*</i>
                    <div class="input-box">
                        <image class="upload-img hide" src=""></image>
                        <span class="upload-step">第二步</span>
                        <div class="upload-center">
                            <i class="upload-icon"></i>
                            <p class="upload-txt">上传医师资格证</p>
                        </div>
                        <input class="unload-input" data-type="doctorId" type="file" name="doctorFile" value="" accept="image/*">
                    </div>
                </div>
                <div class="upload-inner-box">
                    <i class="i-required">*</i>
                    <div class="input-box">
                        <image class="upload-img hide" src=""></image>
                        <span class="upload-step">第三步</span>
                        <div class="upload-center">
                            <i class="upload-icon"></i>
                            <p class="upload-txt">上传医师执业证</p>
                        </div>
                        <input class="unload-input" data-type="practitionId" type="file" name="pratitionFile" value="" accept="image/*">
                    </div>
                </div>
            </div>
            <div class="upload-example plr15">
                <h4 class="example-tit">图片示例</h4>
                <ul class="examples flex-btw">
                    <li>标准</li>
                    <li>信息缺失</li>
                    <li>模糊</li>
                    <li>闪光强烈</li>
                </ul>
            </div>
            <div class="submit-box">
                <p class="tip">*认证信息仅用于审核，我们将严格保护你的隐私</p>
                <input class="pub-submit-btn" type="submit" value="提交认证">
                <div class="btn-wrapper">
                    <a class="choose-identity" href="javascript:history.back(-1)">选择其他身份</a>
                </div>
            </div>
        </form>
    </div>
    <script>
        var imgList = {
            cardId: '',
            doctorId: '',
            practitionId: ''
        }
        $('.unload-input').change(function(e){
            fileUpload(this);
        })

        function fileUpload(fileInput, type){
            var type = $(fileInput).attr('data-type');
            var file = fileInput.files[0];
            // 获取图片路径
            var url = getFileUrl(file);
            // 显示图片
            $(fileInput).siblings('.upload-img').attr('src', url).show();
            // 上传图片
            singleFileUpload(file, function(data){
                imgList[type] = data.uploadId
            })
        }
        
        function submitCard(){
            var doctorNumberInput = $('[name=doctorNumberInput]').val();
            var msg = {
                cardId: '请上传身份证',
                doctorId: '请上传医师资格证',
                practitionId: '请上传医师执业证'
            }
            // 验证数据不为空
            if(validEmpty(doctorNumberInput, '医生资格证号码不能为空')) return false;
            for(let k in imgList){
                if(validEmpty(imgList[k], msg[k])) return false;
            }
            
            // 数据写入表单
            for(let k in imgList){
                $('[name=' + k + ']').val(imgList[k]);
            }
            $('#doctorModule').hide();
            $('#main').show();
            $('[name=doctorNumber]').val(doctorNumberInput);
            $('#doctorView').html(doctorNumberInput);
            return false;
        }
    </script>
</body>
</html>